﻿<!DOCTYPE html>

<html>
<head>
    <meta charset="utf-8" />
    <title>小米商城</title>
    <link rel="stylesheet" href="css\MyIconfont.css">
    <!--<link rel="stylesheet" href="css\reset.css">-->
    <style>
        a{
            text-decoration: none;
            color:#333;
        }
        ul{
          list-style:none;  
        }
        body {
            padding: 0;
            margin: 0;
            font-family: Helvetica,Arial;
            min-width: 1226px;
        }
        .site-topbar {
            height: 40px;
            background-color: #333333;
        }
        .container {
            width: 1226px;
            margin: 0 auto;
            line-height: 40px;
        }
            .container::after {
                content: " ";
                display: block;
                clear: both;
            }
            .container a:hover {
                color: #fff;
            }
            .container a {
                display: inline-block;
                color: #b0b0b0;
                font-size: 12px;
            }
        .item {
            float: left;
            height: 40px;
            line-height: 40px;
        }
        .sep {
            margin: 0 6px;
            color: #424242;
            font-size: 12px;
        }
        .shop {
            position:relative;
            float: right;
            width: 120px;
            text-align: center;
            margin-left: 15px;
            height: 40px;
            line-height: 40px;
        }
        .shop-win{
            display:none;
            background-color:#fff;
            width:316px;
            height:95px;
            line-height:95px;
            font-size:12px;
            color:#444;
            box-shadow:0 2px 10px rgba(0,0,0,0.15);
            position:absolute;
            right:0;
            top:40px;
            z-index:10;
        }
            .shop a{
                display: block;
                height: 40px;
                background: #424242;
                font-size: 12px;
            }
            .shop:hover .shop-color{
                background: #fff;
                color: #f55c00;
            }
            .shop:hover .shop-win{
                display:block;
            }
        .login {
            float: right;
            height: 40px;
        }
        .active {
            line-height: 20px;
        }
        .navigation {
            width: 1226px;
            margin: 0 auto;
            height: 100px;
        }
        .header-logo {
            float: left;
            margin-top: 22px;
        }
        .search {
            float: right;
            margin-top: 25px;
            position:relative;
        }
            .search form input[type=text] {
                height: 46px;
                width: 193px;
                border: 1px solid #e0e0e0;
                font-size: 14px;
                line-height: 46px;
                outline: none;
                padding:1px 15px;
            }
            .search form input[type=submit] {
                height: 50px;
                width: 50px;
                background: #fff;
                border: 1px solid #e0e0e0;
                vertical-align: top;
                margin-left: -1px;
            }
            .search form:hover .search-text{
                border:1px solid #666;
            }
            .search form:hover .search-bth{
                border:1px solid #666;
            }
            .search form input[type=submit]:hover {
                background-color: #f55c00;
                color: #fff;
            }
            .search div{
                position:absolute;
                top: 15px;
                left: 106px;
            }
            .search a{
                text-decoration:none;
                font-size:12px;
                color:#666;
                background:#eeeeee;
                margin-left:5px;
                padding:0 5px;
            }
            .search a:hover{
                background:#f55c00;
                color:#fff;
            }
        .nav{
            float:left;
            width:850px;
        }
        .subnav{
            position:relative;
        }
            .subnav a{
                width:127px;
                font-size:14px;
            }
            .tem{
                visibility:hidden;
            }
        .nav-item{
            margin:0;
            width:820px;
            height:100px;
            font-size:16px;
            line-height:100px;
            padding-left:30px;
        }
            .nav-item a{
                display:block;
                height:100px;
                color:#000;
            }
            .nav-item a:hover{
                color:#f55c00;
            }
            .nav-item li{
                float:left;
                display:list-item;
                margin:0 10px;
            }
        .category-item{
            z-index:10;
            width:234px;
            position:absolute;
            top: 100px;
            left: -96px;
            background:rgba(0,0,0,0.6);
        }
            .category-item ul{
                height:440px;
                padding-left:0;
                padding-top:20px;
            }
            .category-item li{
                margin:0;
                height:42px;
                line-height:42px;
            }
            .category-item a{
                height:42px;
                width:204px;
                position:relative;
                display:block;
                padding-left:30px;
                font-size:14px;
                color:#fff;
            }
            .category-item a:hover{
                background:#f55c00;
                color:#fff;
            }
            .category-item i{
                position:absolute;
                left: 200px;
            }
        .master-content{
            width:1226px;
            margin:0 auto;
        }
        .master-map{
            position:relative;
            background-image:url("/image/xmad_15590487108559_JOpcA.jpg");
            background-size:100%;
            background-repeat: no-repeat;
            height:480px;
            width:1226px;
        }
        .img-left{
            position:absolute;
            top:50%;
            left:234px;
            height:69px;
            width:41px;
            margin-top: -35px;
            background-image:url("/image/icon-slides.png");
            background-repeat:no-repeat;
            background-position:-83px;
        }
        .img-left:hover{
            background-position:0;
        }
        .img-right{
            position:absolute;
            top:50%;
            left:1185px;
            height:69px;
            width:41px;
            margin-top: -35px;
            background-image:url("/image/icon-slides.png");
            background-repeat:no-repeat;
            background-position:-124px;
        }
        .img-right:hover{
        background-position:-42px;
        }
        .row-centent::after{
            content:'';
            display:block;
            clear:both;
        }
        .thumbnail{
            float:left;
            width:234px;
            background-color:#5f5750;
        }
            .thumbnail li{
                padding-top:15px;
                display:inline-table;
            }
            .thumbnail ul{
                display:block;
                margin:0;
                padding:0;
                height:170px;
            }
            .thumbnail a{
                text-align:center;
                width:70px;
                height:64px;
                line-height:32px;
                float:left;
                text-decoration:none;
                font-size:12px;
                color:rgba(255,255,255,0.7);
            }
            .thumbnail i{
                text-align:center;
                display:block;
                font-size:30px;
            }
        .promo{
            float:left;
            margin-bottom:26px;
        }
            .promo ul{
                margin:0;
                padding:0;
                height:170px;
                margin-left:2px;
            }
            .promo li{
                float:left;
                display:list-item;
                width:316px;
                height:170px;
                margin-left:14px;
            }
            .promo a{
                display:block;
                height:170px;
            }
            .promo img {
                width: 316px;
                height: 170px;
            }
        .banner{
            margin-bottom:42px;
        }
        .banner img{
            width:1226px;
            height:120px;
        }
        .main{
            padding-top:22px;
            background:#f5f5f5;
        }
        .main-container{
            width:1226px;
            margin:0 auto;
        }
        #phone{
            height:686px;
            margin-bottom:8px;
        }
        .phone-title{
            height:58px;
            line-height:58px;
            position:relative;
        }
            .phone-title h2{
                font-size:22px;
                font-weight:200;
                color:#333;
            }
            .phone-title div{
                height:58px;
                float:right;
                position:absolute;
                top:0;
                right:0;
            }
        .phone-item:after{
            content:'';
            clear:both;
            display:block;
        }
        .phone-item-first{
            float:left;
        }
            .phone-item-first ul{
                padding:0;
                margin:0;
            }
            .phone-tiem-first li{
                position:relative;
                height:614px;
                width:234px;
                margin-left:14px;
            }
            .phone-item-first li:hover{
                position:relative;
                top:-3px;
                box-shadow:0 5px 10px rgba(0,0,0,.25);
            }
            .phone-item-first img{
                width:234px;
                height:614px;
            }
        .phone-item-after{
            float:left;
            width:992px;
            height:614px;
        }
            .phone-item-after ul{
                padding:0;
                margin:0;
                width:992px;
                height:614px;
            }
        .phone-item-after-style{
            position:relative;
            float:left;
            height:260px;
            padding:20px 0;
            width:234px;
            margin-left:14px;
            margin-bottom:14px;
            text-align:center;
            background-color:#fff;
        }
        .phone-item-after-style:hover{
            position:relative;
            top:-5px;
            box-shadow:0 5px 5px rgba(0,0,0,.25);
        }
            .phone-item-after-style img{
                display:block;
                width:160px;
                margin:0 auto;
            }
            .phone-item-after-style p{
                color:#999;
                font-size:12px;
            }
            .phone-item-after-style span{
                color:#f55c00;
            }
            .phone-item-after-style div{
                display:block;
                background-color:#83c44e;
                color:#fff;
                position:absolute;
                top:0;
                left:90px;
                width: 56px;
            }
    </style>
</head>
<body>
    <div class="site-topbar">
        <!-- TOP -->
        <div class="container">
            <!-- TOP容器 -->
            <div class="item">
                <!-- 业务导航 -->
                <a href="#">小米商城</a><span class="sep">|</span><a href="#">MIUI</a><span class="sep">|</span><a href="#">loT</a><span class="sep">|</span><a href="#">云服务</a><span class="sep">|</span><a href="#">金融</a><span class="sep">|</span><a href="#">有品</a><span class="sep">|</span><a href="#">小爱开放平台</a><span class="sep">|</span><a href="#">企业团购</a><span class="sep">|</span><a href="#">资质证照</a><span class="sep">|</span><a href="#">协议规则</a><span class="sep">|</span><a href="#">下载app</a><span class="sep">|</span><a href="#">Select Region</a>
            </div>
            <div class="shop">
                <!-- 购物车 -->
                <a href="#" class="shop-color"><i class="iconfont active">&#xe600;</i>购物车（0）</a>
                <div class="shop-win">
                    <span>购物车中还没有商品，赶紧选购吧！</span>
                </div>
            </div>
            <div class="login">
                <!-- 登录 -->
                <a href="#">登录</a><span class="sep">|</span><a href="#">注册</a><span class="sep">|</span><a href="#">消息通知</a>
            </div>
        </div>
    </div>
    <div class="navigation">
        <!-- 导航栏 -->
        <div class="header-logo">
            <!-- logo -->
            <img src="image\logo.png" alt="Alternate Text" />
        </div>
        <div class="search">
            <!-- 搜索框 -->
            <form action="/" method="post">
                <input class="search-text" type="text" name="name" value="" /><input  type="submit" class="search-bth iconfont" name="name1" value="&#xe61f;" />
                <div>
                    <a href="#">小米9</a><a href="#">小米9 SE</a>
                </div>
            </form>
        </div>
        <div class="nav">
            <!-- 导航栏 -->
            <ul class="nav-item">
                <li class="subnav">
                    <a href="#" class="tem"></a>
                    <div class="category-item">
                        <ul>
                            <li><a href="#">手机 电话卡<i class="iconfont">&#xe632;</i></a></li>
                            <li><a href="#">电视 盒子<i class="iconfont">&#xe632;</i></a></li>
                            <li><a href="#">笔记本 平板<i class="iconfont">&#xe632;</i></a></li>
                            <li><a href="#">家电 插线板<i class="iconfont">&#xe632;</i></a></li>
                            <li><a href="#">出行 穿戴<i class="iconfont">&#xe632;</i></a></li>
                            <li><a href="#">智能 路由器<i class="iconfont">&#xe632;</i></a></li>
                            <li><a href="#">电源 配件<i class="iconfont">&#xe632;</i></a></li>
                            <li><a href="#">健康 儿童<i class="iconfont">&#xe632;</i></a></li>
                            <li><a href="#">耳机 音响<i class="iconfont">&#xe632;</i></a></li>
                            <li><a href="#">生活 箱包<i class="iconfont">&#xe632;</i></a></li>
                        </ul>
                    </div>
                </li>
                <li><a href="#">小米手机</a></li>
                <li><a href="#">Redmi 红米</a></li>
                <li><a href="#">电视</a></li>
                <li><a href="#">笔记本</a></li>
                <li><a href="#">家电</a></li>
                <li><a href="#">路由器</a></li>
                <li><a href="#">智能硬件</a></li>
                <li><a href="#">服务</a></li>
                <li><a href="#">社区</a></li>
            </ul>
        </div>
    </div>
    <div>
        <!-- 主要内容 -->
        <div class="master-content">
            <!-- 内容容器 -->
            <div class="master-map">
                <!-- 主图 -->
                <a href="#"><div class="img-left"></div></a>
                <a href="#"><div class="img-right"></div></a>
            </div>
            <div class="row-centent">
                <!-- 替补内容 -->
                <div class="thumbnail">
                    <!-- 小图标 -->
                    <ul>
                        <li><a href="#"><i class="iconfont">&#xe64a;</i>选购手机</a></li>
                        <li><a href="#"><i class="iconfont">&#xe646;</i>企业团购</a></li>
                        <li><a href="#"><i class="iconfont">&#xe693;</i>F码通道</a></li>
                        <li><a href="#"><i class="iconfont">&#xe608;</i>米粉卡</a></li>
                        <li><a href="#"><i class="iconfont">&#xe60f;</i>以旧换新</a></li>
                        <li><a href="#"><i class="iconfont">&#xe618;</i>话费充值</a></li>
                    </ul>
                </div>
                <div class="promo">
                    <!-- 热品 -->
                    <ul>
                        <li><a href="#"><img src="/image/xmad_15590545909107_NaqhU.jpg" alt="Alternate Text" /></a></li>
                        <li><a href="#"><img src="/image/xmad_15586260230135_fKdxm.jpg" alt="Alternate Text" /></a></li>
                        <li><a href="#"><img src="/image/xmad_15410599445473_Ivjsb.jpg" alt="Alternate Text" /></a></li>
                    </ul>
                </div>
                <div class="banner">
                    <a href="#"><img src="/image/xmad_15590330241391_fkvOo.jpg" /></a>
                </div>
            </div>
        </div>
    </div>
    <div class="main">
        <div class="main-container">
            <div id="phone">
                <div class="phone-title">
                    <h2>手机</h2>
                    <div>
                        <a href="#">查看全部<i class="iconfont">&#xe62e;</i></a>
                    </div>
                </div>
                <div class="phone-item">
                    <div class="phone-item-first">
                        <ul>
                            <li>
                                <a href="#"><img src="/image/xmad_15578089659428_Uywcg.jpg" alt="Alternate Text" /></a>
                            </li>
                        </ul>
                    </div>
                    <div class="phone-item-after">
                        <ul>
                            <li class="phone-item-after-style">
                                <a href="#">
                                    <img src="/image/pms_1550642182.7527088!220x220.jpg" />
                                    <h5>小米9 6GB+128GB</h5>
                                    <p>晓龙855，索尼4800万广角微距三摄</p>
                                    <span>2999元</span>
                                    <div>新品</div>
                                </a>
                            </li>
                            <li class="phone-item-after-style">
                                <a href="#">
                                    <img src="/image/pms_1550642182.7527088!220x220.jpg" />
                                    <h5>小米9 6GB+128GB</h5>
                                    <p>晓龙855，索尼4800万广角微距三摄</p>
                                    <span>2999元</span>
                                    <div>新品</div>
                                </a>
                            </li>
                            <li class="phone-item-after-style">
                                <a href="#">
                                    <img src="/image/pms_1550642182.7527088!220x220.jpg" />
                                    <h5>小米9 6GB+128GB</h5>
                                    <p>晓龙855，索尼4800万广角微距三摄</p>
                                    <span>2999元</span>
                                    <div>新品</div>
                                </a>
                            </li>
                            <li class="phone-item-after-style">
                                <a href="#">
                                    <img src="/image/pms_1550642182.7527088!220x220.jpg" />
                                    <h5>小米9 6GB+128GB</h5>
                                    <p>晓龙855，索尼4800万广角微距三摄</p>
                                    <span>2999元</span>
                                    <div>新品</div>
                                </a>
                            </li>
                            <li class="phone-item-after-style">
                                <a href="#">
                                    <img src="/image/pms_1550642182.7527088!220x220.jpg" />
                                    <h5>小米9 6GB+128GB</h5>
                                    <p>晓龙855，索尼4800万广角微距三摄</p>
                                    <span>2999元</span>
                                    <div>新品</div>
                                </a>
                            </li>
                            <li class="phone-item-after-style">
                                <a href="#">
                                    <img src="/image/pms_1550642182.7527088!220x220.jpg" />
                                    <h5>小米9 6GB+128GB</h5>
                                    <p>晓龙855，索尼4800万广角微距三摄</p>
                                    <span>2999元</span>
                                    <div>新品</div>
                                </a>
                            </li>
                            <li class="phone-item-after-style">
                                <a href="#">
                                    <img src="/image/pms_1550642182.7527088!220x220.jpg" />
                                    <h5>小米9 6GB+128GB</h5>
                                    <p>晓龙855，索尼4800万广角微距三摄</p>
                                    <span>2999元</span>
                                    <div>新品</div>
                                </a>
                            </li>
                            <li class="phone-item-after-style">
                                <a href="#">
                                    <img src="/image/pms_1550642182.7527088!220x220.jpg" />
                                    <h5>小米9 6GB+128GB</h5>
                                    <p>晓龙855，索尼4800万广角微距三摄</p>
                                    <span>2999元</span>
                                    <div>新品</div>
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="banner">
                <a href="#"><img src="/image/xmad_15592697481679_cOBYN.jpg" /></a>
            </div>
        </div>
    </div>
</body>
</html>